<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>课程详情</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <style>
        body{ background-color: #F6F7F8}
        header{
            width: 100%;
            height: 2.62rem;
            background-size: 3.75rem auto;
            background-image: url(../../image/inquiry/infoHeaderBackground.png);
        }
        /*header div { height: 0.35rem;  }*/
        .not-active {
            display: none;
        }
        .flex{display: -webkit-box; display: -webkit-flex; display: flex;}
        .header{justify-content: center; width: 100%; height: 0.35rem;}
        #header-title{
            width: 100%;
            line-height: 0.35rem;
            font-size: 0.18rem;
            text-align: center;
            color: #231313;
        }
        #header-button{
            justify-content: space-between;
            align-items: center;
            position: fixed;
            width: 100%;
            height: 0.35rem;
        }
        #button-back{
            margin-left: 0.21rem;
            width: 0.10rem;
            height: 0.18rem;
            background-image: url("../../image/my/arrow03.png");
            background-size: 0.10rem 0.18rem;
        }

        .arrow04{
            /*margin-right: 0.34rem;*/
            width: 0.12rem;
            height: 0.12rem;
            background-image: url("../../image/my/arrow04.png");
            background-size: 0.12rem 0.12rem;
        }

        #user-image {
            width: 0.70rem;
            height: 0.70rem;
            border-radius: 0.35rem;
            background-size: 0.70rem 0.70rem;
            margin-left: 0.20rem;
            margin-right: 0.16rem;
            position: relative;
        }
        #member-tag {
            width: 0.17rem;
            height: 0.17rem;
            border-radius: 0.085rem;
            background-color: #FFFFFF;
            justify-content: center;
            align-items: center;
            position: absolute;
            right:0.04rem;
            bottom:0.04rem;
        }
        #member-img {
            width: 0.15rem;
            height: 0.15rem;
            border-radius: 0.075rem;
            background-size: 0.15rem 0.15rem;
        }
        #member-block {
            width: 3.45rem;
            height: 0.87rem;
            border-radius: 0.08rem 0.08rem 0 0;
        }
        #member-title {
            font-size: 0.18rem;
            font-weight: 600;
            color: #633331;
            margin-top: 0.20rem;
            margin-left: 0.15rem;
        }
        #member-note {
            font-size: 0.14rem;
            color: #633331;
            margin-left: 0.15rem;
        }

        .jin-icon {
            width: 0.21rem;
            height: 0.18rem;
            background-size: 0.21rem 0.18rem;
            background-image: url("../../image/my/jin-icon-2.png");
        }
        .yin-icon {
            width: 0.21rem;
            height: 0.18rem;
            background-size: 0.21rem 0.18rem;
            background-image: url("../../image/my/yin-icon-2.png");
        }
    </style>
</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical">
    <header>
        <div class="flex header">
            <div class="flex" id="header-button">
                <div class="flex" style="width: 0.70rem; height: 0.35rem; align-items: center;" tapmode onclick="api.closeWin();">
                    <div id="button-back"></div>
                </div>
                <!--<div class="flex" style="width: 0.70rem; height: 0.35rem; align-items: center; justify-content: flex-end" tapmode onclick="share();">-->
                    <!--<div id="share-icon"></div>-->
                <!--</div>-->
            </div>
            <!--<p id="header-title">充值会员</p>-->
        </div>
        <div class="flex" style="height: 0.70rem; align-items: center;">
            <div id="user-image">
                <div id="member-tag" class="flex not-active">
                    <div id="member-img"></div>
                </div>
            </div>
            <div class="flex" style="width: 2.50rem; height: 0.53rem; justify-content: space-between; align-items: center">
                <div>
                    <p id="user-name" style="font-size: 0.20rem; line-height: 0.28rem; color: #FFFFFF; font-weight: 600; margin-bottom: 0.03rem"></p>
                    <p id="user-phone" style="font-size: 0.16rem; line-height: 0.22rem; color: #FFFFFF;"></p>
                </div>
            </div>
        </div>
        <div class="flex" style="width: 100%; justify-content: center; margin-top: 0.20rem;">
            <div id="member-block">
                <p id="member-title"></p>
                <p id="member-note"></p>
            </div>
        </div>
        <div class="flex" style="width: 100%; height: 0.50rem; background-color: #633331; justify-content: space-between; align-items: center;">
            <div class="flex" style="margin-left: 0.30rem; align-items: center;" tapmode onclick="changeMemberBlock(0)">
                <div class="jin-icon"></div>
                <p style="font-size: 0.16rem; font-weight: 200; color: white; margin-left: 0.07rem; margin-right: 0.20rem">金牌会员</p>
                <div class="arrow04"></div>
            </div>
            <div style="border-style: solid; border-width: 0.005rem; border-color: white; height: 0.26rem"></div>
            <div class="flex" style="margin-right: 0.30rem; align-items: center;" tapmode onclick="changeMemberBlock(1)">
                <div class="yin-icon"></div>
                <p style="font-size: 0.16rem; font-weight: 200; color: white; margin-left: 0.07rem; margin-right: 0.20rem">银牌会员</p>
                <div class="arrow04"></div>
            </div>
        </div>
    </header>
    <div id="main" class="flex-con">

    </div>
</div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common/common.js"></script>
<script type="text/javascript">
    var userImageEl, memberTagEl, userNameEl, userPhoneEl, memberBlockEl, memberTitleEl, memberNoteEl;
    var productList;
    apiready = function () {
        $api.fixStatusBar( $api.dom('header') );

        userImageEl = $api.byId('user-image');
        memberTagEl = $api.byId('member-img');
        userNameEl = $api.byId('user-name');
        userPhoneEl = $api.byId('user-phone');
        memberBlockEl = $api.byId('member-block');
        memberTitleEl = $api.byId('member-title');
        memberNoteEl = $api.byId('member-note');

        productList = [
            {
                "product_name": "金牌会员",
                "product_desc": "风水医道大师一对一服务",
                "background": "../../image/my/jin-block.png"
            },
            {
                "product_name": "银牌会员",
                "product_desc": "无限制观看大相培训课程",
                "background": "../../image/my/yin-block.png"
            }
        ];

        if (api.pageParam.userTag != undefined) {
            $api.removeCls(memberTagEl, "not-active");
            $api.css(memberTagEl,'background-image: url(' + api.pageParam.userTag + ');');
        }

        $api.css(userImageEl,'background-image: url(' + api.pageParam.userImage + ');');
        $api.text(userNameEl, api.pageParam.userName);
        $api.text(userPhoneEl, api.pageParam.userPhone);

        api.openFrame({
            name: 'memberFrame',
            url: './memberFrame.html',
            bgColor: 'rgba(0,0,0,0)',
            bounces: true,
            pageParam: {
                tag: api.pageParam.tag,
            },
            rect: {
                x: 0,
                y: $api.dom('header').offsetHeight,
                w: api.winWidth,
                h: $api.dom('#main').offsetHeight
            }
        });

        // changeMemberBlock(api.pageParam.tag);
        // changeMemberBlock(0);
    }

    function changeMemberBlock(tag) {
        $api.css(memberBlockEl,'background-image: url(' + productList[tag]["background"] + ');');
        $api.text(memberTitleEl, productList[tag]["product_name"]);
        $api.text(memberNoteEl, productList[tag]["product_desc"]);

        var jsfun = 'changeMemberList(' + tag + ');';
        api.execScript({
            frameName: 'memberFrame',
            script: jsfun
        });
    }
</script>
